<template>
  <div class="common-frame">
    {{$route.query}}
    <component v-bind:is="componentname" :data="paramsData" style="padding:20px;background:#fff;" :readonly="true"></component>
  </div>
</template>
<script>
/**
 * loadUserPage(url,params)，第一个参数为页面路径，第二个为子页面需要的参数，可在子页面用this.$attrs.data获取
 * default-active 为默认展开的菜单，el-menu-item标签上的index为跳转的页面路径
 * 点击菜单会自动执行select方法，可在方法里传参
 *
*/
  export default {
    data() {
      return {
        componentname:'',
        paramsData:{},
        isCollapse: false,
      };
    },
    created(){
      this.loadUserPage(this.$route.query.url);
    },
    methods: {
      loadUserPage(name,id){
        import(`@/${name}.vue`).then((FBshare)=>{
          this.componentname=FBshare.default;
        })
      }
    }
  }

</script>

<style scoped>
.el-menu-item.is-active{
    background: rgb(218, 31, 36);
    color: #fff;
  }
.common-frame{
  clear: both;
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
.left-menu{
  width: 225px;
  float: left;
  list-style: none;
  overflow: auto;
  height: 100vh;
}
.el-submenu .el-menu-item{
  padding-left:55px!important;
  height:100%;
}
.right-main{
  width: 100%;
  float: right;
  list-style: none;
  height: 100vh;
  padding-left:240px;
  margin-left: -240px;
  overflow: auto;
}
</style>
